@extends('layouts.index')
@section('title', '首页')
@section('content')
    <div class="kaisou-header layui-show-sm layui-hide-xs" >
        <div class="layui-container">
            <div class="layui-row">
                <div class="layui-col-md4">
                    <h1 class="mallLogo">
                        <a href="/"><img src="http://shop.geekadpt.cn/images/kaisou/logo.png" width="80%"></a>
                    </h1>
                </div>
                <div class="layui-col-md4 layui-col-md-offset4">
                    <div class="mallSearch">
                        <form action="{{ route('products.index') }}" class="layui-form search-form" novalidate="">
                            <input type="text" name="search" required="" lay-verify="required" autocomplete="off" class="layui-input" placeholder="请输入需要的商品">
                            <button class="layui-btn" lay-submit="" lay-filter="formDemo">
                                <i class="layui-icon layui-icon-search"></i>
                            </button>
                            <input type="hidden" name="" value="">
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="kaisou-sec-nav layui-hide-xs ">
        <div class="layui-container">
            <div class="layui-row">
                <ul class="kaisou-sec-ul layui-nav " lay-filter="" style="">
                    <li class="layui-nav-item layui-this"><a href="">书籍</a></li>
                    <li class="layui-nav-item"><a href="">生活用品</a></li>
                    <li class="layui-nav-item"><a href="">3C数码</a></li>
                    <li class="layui-nav-item"><a href="">鞋服美妆</a></li>
                    <li class="layui-nav-item"><a href="">其它</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="kaisou-carousel" style="@if($result==1)display:none;@endif">
        <div class="layui-container">
            <div class="layui-row">
                <div class="layui-carousel" id="carousel">
                    <div carousel-item>
                        <div><img src="http://shop.geekadpt.cn/images/kaisou/carouse9.jpg" ></div>
                        <div><img src="http://shop.geekadpt.cn/images/kaisou/carousel2.jpg" ></div>
                        <div><img src="http://shop.geekadpt.cn/images/kaisou/carouse8.jpg" ></div>
                        <div><img src="http://shop.geekadpt.cn/images/kaisou/carouse5.jpg" ></div>
                        <div><img src="http://shop.geekadpt.cn/images/kaisou/carouse6.jpg" ></div>
                        <div><img src="http://shop.geekadpt.cn/images/kaisou/carouse7.jpg" ></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="kaisou-floors" style="@if($result==1)display:none;@endif ">
        <div class="layui-container">
            <div class="layui-row layui-col-space10">
                <h1 class="kaisou-sorts">热门分类</h1>
                <div class="layui-col-md3 kaisou-sort1" >
                    <img src="http://shop.geekadpt.cn/images/static/s_img1.jpg">
                </div>
                <div class="layui-col-md3 layui-col-md-offset1">
                    <img src="http://shop.geekadpt.cn/images/static/s_img1.jpg">
                </div>
                <div class="layui-col-md3 layui-col-md-offset1">
                    <img src="http://shop.geekadpt.cn/images/static/s_img1.jpg">
                </div>
            </div>
        </div>
    </div>
    <div class="kaisou-more">
        <div class="layui-container">
            <div class="layui-row layui-col-space10">
                <h1 class="kaisou-sorts">最近更新</h1>
                <div class="layui-col-md12">
                    <form action="{{ route('products.index') }}" class="layui-form search-form" novalidate="">
                    <div class="layui-col-md9">
                        <div class="kaisou-search">
                                <input type="text" name="search" required="" lay-verify="required" autocomplete="off" class="layui-input" placeholder="请输入需要的商品">
                                <button class="layui-btn" lay-submit="" lay-filter="formDemo">
                                    <i class="layui-icon layui-icon-search"></i>
                                </button>
                                <input type="hidden" name="" value="">
                        </div>
                    </div>

                    <div class="layui-col-md3">
                        <select name="order" class=" float-left" style="display: block;font-size: 16px;margin-bottom: 10px;height: 38px">
                            <option value="">默认排序</option>
                            <option value="price_asc">价格从低到高</option>
                            <option value="price_desc">价格从高到低</option>
                            <option value="sold_count_desc">销量从高到低</option>
                            <option value="sold_count_asc">销量从低到高</option>
                            <option value="rating_desc">评价从高到低</option>
                            <option value="rating_asc">评价从低到高</option>
                        </select>
                    </div>
                    </form>
                </div>
                <div style="clear: both"></div>
                @if($products!='')
                @foreach($products as $product)

                    <div class="layui-col-md3">
                        <div class="list-item">
                            <a href="{{ route('products.show', ['product' => $product->id]) }}"><img src="{{ $product->image_url }}"></a>
                            <p>{{ $product->title }}</p>
                            <span>{{ $product->price }}</span>
                        </div>
                    </div>
                @endforeach
                @else
                    <div class="layui-col-md3">
                        <div class="list-item">
                            <p>小主，我什么都没查到哇！Ծ‸Ծ</p>
                        </div>
                    </div>
                @endif
                <div class="layui-col-md12">
                    <div class="float-right">{{ $products->appends($filters)->render() }}</div>
                </div>

            </div>
        </div>
    </div>
@section('scriptsAfterJs')
    <script>
        layui.use(['element','carousel','jquery'], function(){
            var element = layui.element;
            var carousel = layui.carousel;
            var $ = layui.$;
            //建造实例
            carousel.render({
                elem: '#carousel'
                ,width: '100%' //设置容器宽度
                ,arrow: 'always' //始终显示箭头
                //,anim: 'updown' //切换动画方式
                ,height:'350px'
            });
            var filters = {!! json_encode($filters) !!};
            $(document).ready(function () {
                $('.search-form input[name=search]').val(filters.search);
                $('.search-form select[name=order]').val(filters.order);
            });

            $('.search-form select[name=order]').on('change', function() {
                $('.search-form').submit();
            });
            @if($result==1)
            // $('.kaisou-carousel').css('display','none');
            // $('.kaisou-floors').css('display','none');
            $('.kaisou-sorts').html('查询结果');
            @endif
        });
    </script>
@endsection
@endsection